Zero1000

Score-Vue

10: axios.js
6: 選択肢

1. 基本形

index.html
<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<dir id="app">
{{cnt+1}}/{{len}}<br>


<h4 v-html=quiz[cnt].q > </h4>


<li v-for="(q,i) in quiz[cnt].a">

<button @click="bt(i)">{{q}}</button>

</li>




<hr>
{{quiz[cnt].c}}<br>
<button @click="up">up</button>


</dir>


<script>

new Vue({
	el:"#app",
	data:{
		cnt:0,
		quiz:[],		
	},
	
	methods:{
		up:function(){this.cnt +=1},
		
		bt:function(x){alert(x)},		
	},
	
	mounted :function(){
	
		axios.get('https://zero1000.mixh.jp/quiz')
        .then(response => this.quiz=response.data )
        .catch(error => console.log(error))
        
        //this.len=this.quiz.length  
  	},
  	
  	
  	computed: {
      
    len: function() {
        return this.quiz.length
    }
  }
  	
})
</script>